<template>
    <div class="content-container" direction="vertical">
        <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
          <el-tab-pane label="日汇总" name="1">           
            <el-table 
            :data="tradeListDay"
            :header-cell-style="{'text-align':'center'}"  
            :cell-style="{'text-align':'center'}"
            style="width:100%"
            stripe             
            max-height="500"
            border>
              <el-table-column type="index" width="80" label="序号"/>    
              <el-table-column label="日期" prop="time"></el-table-column>
              <el-table-column label="收入" prop="income"></el-table-column>
              <el-table-column label="支出" prop="consume"></el-table-column>
              <el-table-column label="备注" prop="remark"></el-table-column>
            </el-table>                    
          </el-tab-pane>
          <el-tab-pane label="月汇总" name="2">
            <el-table 
            :data="tradeListMonth"
            :header-cell-style="{'text-align':'center'}"  
            :cell-style="{'text-align':'center'}"
            stripe  
            max-height="500"
            border>
              <el-table-column type="index" width="80" label="序号"/>    
              <el-table-column label="日期" prop="time"></el-table-column>
              <el-table-column label="收入" prop="income"></el-table-column>
              <el-table-column label="支出" prop="consume"></el-table-column>
              <el-table-column label="备注" prop="remark"></el-table-column>
            </el-table>
          </el-tab-pane>       
        </el-tabs>
    </div>
</template>

<script>
import Mock from '@/mock/Mock'
export default {
    data() {
        return {
            activeTab: "1",
            tradeListDay: [],
            tradeListMonth: []
        }
    },
    mounted() {
        this.tradeListDay = Mock.getTradeListDayList();
        this.tradeListMonth = Mock.getTradeListMonthList();
    },
    methods: {
        handleClick(tab, event) {
            this.tradeListDay = Mock.getTradeListDayList();
            this.tradeListMonth = Mock.getTradeListMonthList();
        }
    }
}
</script>